<template>
	<div class="contain">
		<div class="login_box">
			<el-form ref="ruleFormRef" :rules="rules" :model="Form">
				<div class="login_title">叩丁狼商品管理系统</div>
				<el-form-item prop="username">
					<el-input v-model="Form.username" placeholder="请输入账号" clearable>
						<template #prefix>
							<el-icon class="el-input__icon" :size="20" color="#454545"><Avatar /></el-icon>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="Form.password" placeholder="请输入密码" clearable>
						<template #prefix>
							<el-icon class="el-input__icon" :size="20" color="#454545"><Lock /></el-icon>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit(ruleFormRef)">提交</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
// 引入图标
import { Avatar, Lock } from "@element-plus/icons-vue";
// 引入类型
import type { FormInstance, FormRules } from "element-plus";
// 引入登录api
import * as admin from "@/request/modules/admin";
// 引入cookie
import Cookies from "js-cookie";
// 引入router
import router from "@/router/index";
const ruleFormRef = ref<FormInstance>();
// 表单数据
const Form = reactive({
	username: "",
	password: "",
	/* username: "isummer",
	password: "987654", */
});
// 校验规则
const rules = reactive<FormRules>({
	username: [{ required: true, message: "请输入账号", trigger: ["blur", "change"] }],
	password: [{ required: true, message: "请输入密码", trigger: ["blur", "change"] }],
});
// 提交按钮
const onSubmit = (ref: FormInstance | undefined) => {
	if (!ref) return;
	ref.validate(async (valid, fields) => {
		if (valid) {
			// console.log("submit!");
			let res = await admin.LoginAPI({
				username: Form.username,
				password: Form.password,
			});
			// console.log(res);
			if (!res) return;
			Cookies.set("token", res.tokenHead + res.token);
			// 跳转到首页
			router.push("/");
		} else {
			// console.log("error submit!");
			console.log(fields);
		}
	});
};
</script>

<style lang="less" scoped>
.contain {
	width: 100vw;
	height: 100vh;
	background-color: #2d3a4b;

	.login_box {
		width: 420px;
		text-align: center;
		// background-color: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.login_title {
			font-size: 24px;
			color: #fff;
			font-weight: bold;
			padding: 10px 0;
		}
		:deep(.el-input__wrapper) {
			height: 50px;
			background: #283443;
			box-shadow: none;
			border: 1px solid #3e4957;
			.el-input__inner {
				text-indent: 1em;
			}
		}
		:deep(.el-button--primary) {
			width: 100%;
			height: 42px;
		}
	}
}
</style>
